import 'package:flutter/material.dart';
import 'package:flutter_framework/utils/screen_ui.dart';
import 'package:flutter_framework/widgets/sliver_header_delegate.dart';

class RedBookUser extends StatefulWidget {
  const RedBookUser({super.key});

  @override
  State<RedBookUser> createState() => _RedBookUserState();
}

class _RedBookUserState extends State<RedBookUser> {
  double get barHeight => 60 + ScreenUI.topSafeHeight;
  List<dynamic> menuList = [
    {"title": "购物", "subTitle": "好逛好玩又好买"},
    {"title": "订单", "subTitle": "查看我的订单"},
    {"title": "购物车", "subTitle": "查看推荐好物"},
    {"title": "创作灵感", "subTitle": "学创作找灵感"},
    {"title": "浏览记录", "subTitle": "看过的笔记"},
  ];
  ValueNotifier<bool> overlapsContentVal = ValueNotifier(false);

  bool onShouldScroll(ScrollMetrics position, double value) {
    return overlapsContentVal.value;
  }

  @override
  void dispose() {
    overlapsContentVal.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          _buildAppbar(),
          _buildUserInfo(),
          _buildStickBar(),
          _buildDataList(),
        ],
      ),
    );
  }

  Widget _buildDataList() {
    return SliverFillRemaining(
        child: PageView(
      children: [
        Container(
          color: Colors.blue,
        ),
        Container(
          child: MediaQuery(
            data: MediaQuery.of(context)
                .copyWith(padding: EdgeInsets.only(top: 0)),
            child: ListView.builder(
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: (ctx, index) {
                return Container(
                  color: Colors.blue.withOpacity(index % 10 * 0.1),
                  height: 50,
                );
              },
              itemCount: 20,
            ),
          ),
        ),
        Container(
          color: Colors.yellow,
        )
      ],
    ));
  }

  /// 构建appbar
  Widget _buildAppbar() {
    return SliverAppBar(
      pinned: true,
      backgroundColor: Colors.white,
      collapsedHeight: 60,
      elevation: 0,
      scrolledUnderElevation: 1,
    );
  }

  /// 构建用户信息
  Widget _buildUserInfo() {
    return SliverToBoxAdapter(
        child: Container(
      decoration: const BoxDecoration(
          gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        stops: [0, 0.8, 1],
        colors: [Colors.white, Color(0xFF5b584f), Color(0xFF5b584f)],
      )),
      child: Column(
        children: [
          // _buildTop(),
          Stack(
            children: [
              Padding(
                padding: const EdgeInsets.only(left: 10.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    /// 构建头像相关信息
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Container(
                          width: 80,
                          height: 80,
                          margin: const EdgeInsets.only(
                            top: 10,
                          ),
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(40),
                              color: Colors.red),
                        ),
                        const Padding(
                          padding: EdgeInsets.only(bottom: 15.0, left: 10),
                          child: Text("小红书号：132432414123"),
                        )
                      ],
                    ),
                    const Padding(
                      padding: const EdgeInsets.only(top: 10.0),
                      child: Text(
                        "点击这里，填写监介",
                        style: TextStyle(color: Colors.white, fontSize: 13),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 10),
                      child: Container(
                        width: 20,
                        height: 20,
                        decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(10)),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 10, horizontal: 0),
                      child: DefaultTextStyle(
                        style:
                            const TextStyle(color: Colors.white, fontSize: 14),
                        child: Row(
                          children: [
                            const Column(
                              children: [
                                Text("0"),
                                Text("关注"),
                              ],
                            ),
                            const Padding(
                              padding: EdgeInsets.symmetric(horizontal: 10.0),
                              child: Column(
                                children: [
                                  Text("0"),
                                  Text("粉丝"),
                                ],
                              ),
                            ),
                            const Column(
                              children: [
                                Text("0"),
                                Text("获赞与收藏"),
                              ],
                            ),
                            const Spacer(),
                            Container(
                              padding: const EdgeInsets.symmetric(
                                  vertical: 4, horizontal: 10),
                              decoration: BoxDecoration(
                                  border: Border.all(color: Colors.white),
                                  borderRadius: BorderRadius.circular(20)),
                              child: const Text("编辑资料"),
                            ),
                            Container(
                              margin:
                                  const EdgeInsets.only(left: 10, right: 10),
                              padding: const EdgeInsets.symmetric(
                                  vertical: 6, horizontal: 10),
                              decoration: BoxDecoration(
                                  border: Border.all(color: Colors.white),
                                  borderRadius: BorderRadius.circular(20)),
                              child: const Icon(
                                Icons.settings,
                                color: Colors.white,
                                size: 16,
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    _buildMenuList(),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    ));
  }

  /// 构建menu list
  Widget _buildMenuList() {
    return Container(
      height: 60,
      margin: const EdgeInsets.only(top: 10),
      padding: const EdgeInsets.only(bottom: 10),
      child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: menuList.length,
          itemBuilder: (ctx, index) {
            return Container(
              decoration: BoxDecoration(
                  color: Colors.white.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(8)),
              margin: const EdgeInsets.only(right: 10),
              padding: const EdgeInsets.only(left: 10),
              width: 108,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    '${menuList[index]['title']}',
                    style: const TextStyle(color: Colors.white, fontSize: 14),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 1.0),
                    child: Text(
                      '${menuList[index]['subTitle']}',
                      style: TextStyle(
                          color: Colors.white.withOpacity(0.8), fontSize: 12),
                    ),
                  ),
                ],
              ),
            );
          }),
    );
  }

  /// 构建吸顶头部
  Widget _buildStickBar() {
    return SliverPersistentHeader(
      pinned: true,
      delegate: SliverAppBarDelegate(
        maxHeight: 50,
        minHeight: 50,
        overlapsContentVal: overlapsContentVal,
        child: Container(
          decoration: const BoxDecoration(
            color: Color(0xFF5b584f),
            border: Border(
              bottom: BorderSide(
                  color: Color(
                    0xFFEDEDED,
                  ),
                  width: 1),
            ),
          ),
          child: Container(
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10),
                topRight: Radius.circular(10),
              ),
            ),
            padding: const EdgeInsets.symmetric(horizontal: 60),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ListenableBuilder(
                    listenable: overlapsContentVal,
                    builder: (ctx, child) {
                      return Text("是否吸顶：${overlapsContentVal.value}");
                    }),
                Expanded(
                  child: Text(
                    "笔记",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600),
                  ),
                ),
                Expanded(
                  child: Text(
                    "收藏",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600),
                  ),
                ),
                Expanded(
                  child: Text(
                    "赞过",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}
